<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CSMall</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <el-row>
            <el-col :span="24">
                <div class="block">
                    <el-carousel height="550px" trigger="click">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <h3>{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="homenav">
                        <nav>
                            <ul>
                                <li class="hidden-xs-only"><a href="">Home</a></li>
                                <li class="hidden-xs-only"><a href="">Products</a></li>
                                <li class="hidden-xs-only"><a href="">Account</a></li>
                                <li><a href=""><img src="images/cart.png" width="30px" height="30px"></a></li>
                                <li class="hidden-sm-and-up"><a href=""><img src="images/menu.png" width="30px" height="30px"></a></li>
                            </ul>
                        </nav>
                    </div>

                </div>
            </el-col>
        </el-row>

        <h2 class="title">Categories</h2>
        <categories :t="categoriesFlexType"></categories>

        <h2 class="title">Featured Products</h2>
        <el-row type="flex" justify="center" :gutter="20">
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-1.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-2.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-3.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-4.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
        </el-row>

        <h2 class="title">Lastest Products</h2>
        <el-row type="flex" justify="center" :gutter="20">
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-5.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-6.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-7.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-8.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
        </el-row>
        <div style="width: 30px; height: 50px;"></div>
        <el-row type="flex" justify="center" :gutter="20">
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-9.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-10.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-11.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="product">
                    <img src="images/product-12.jpg">
                    <h4>Red Printed T-Shirt</h4>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>$50.00</p>
                </div>
            </el-col>
        </el-row>

        <el-row type="flex" justify="center" :gutter="20" class="offer">
            <el-col :span="8">
                <img src="images/exclusive.png">
            </el-col>
            <el-col :span="8">
                <div class="offerdesc">
                    <p>Exclusively Available on CSMall</p>
                    <h1>Smart Band 4</h1>
                    <small>
                        The Mi Smart Band 4 features a 39.9% langer (than Mi Band 3) AMOLED color full-touch display with ajustable brightness, so everything is clear as can be.
                    </small>
                    <div>
                        <a href="" class="btn">Explore Now &#8594;</a>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row type="flex" justify="center" :gutter="20" class="testimonial">
            <el-col :span="5">
                <el-card class="testimonialItem">
                    <i class="fa fa-quote-left"></i>
                    <p>Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good </p>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <img src="images/user-1.png">
                    <h3>Sean Packer</h3>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="testimonialItem">
                    <i class="fa fa-quote-left"></i>
                    <p>Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good </p>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <img src="images/user-2.png">
                    <h3>Sean Packer</h3>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="testimonialItem">
                    <i class="fa fa-quote-left"></i>
                    <p>Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good Good </p>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <img src="images/user-3.png">
                    <h3>Sean Packer</h3>
                </el-card>
            </el-col>
        </el-row>

        <el-row type="flex" justify="center" :gutter="20" class="brands">
            <el-col :span="3" class="brand">
                <img src="images/logo-godrej.png">
            </el-col>
            <el-col :span="3" class="brand">
                <img src="images/logo-oppo.png">
            </el-col>
            <el-col :span="3" class="brand">
                <img src="images/logo-coca-cola.png">
            </el-col>
            <el-col :span="3" class="brand">
                <img src="images/logo-paypal.png">
            </el-col>
            <el-col :span="3" class="brand">
                <img src="images/logo-philips.png">
            </el-col>
        </el-row>

        <el-row type="flex" justify="center" :gutter="20" class="footer">
            <!-- <el-col :span="6" class="footer-download">
                <h3>Download Our App</h3>
                <p>Download App for Android and IOS mobile phone.</p>
                <div class="app-logo">
                    <img src="images/play-store.png">
                    <img src="images/app-store.png">
                </div>
            </el-col> -->
            <el-col :span="8" class="footer-col">
                <img src="images/logo-white.png">
                <p>Copyright 2022 - CSTec</p>
            </el-col>
            <el-col :span="3" class="footer-col">
                <h3>Usefule Links</h3>
                <ul>
                    <li>Coupons</li>
                    <li>Blog Post</li>
                    <li>Return Policy</li>
                    <li>Join Affiliate</li>
                </ul>
            </el-col>
            <el-col :span="3" class="footer-col">
                <h3>Follow Us</h3>
                <ul>
                    <li>Facebook</li>
                    <li>Twitter</li>
                    <li>Instagram</li>
                    <li>YouTube</li>
                </ul>
            </el-col>
        </el-row>
    </div>
</body>
<script src="vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="index.js"></script>

</html>